<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评分效果</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2107815_byv17nge3kh.css">
    <style>
        .star{
            width: 30px;
            height: 30px;
            color: orangered;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <ul class="flex">

    </ul>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let count = 10  //星星数量
        let socre = 5   //当前分数
        //在ul中生成li
        for(let i=1;i<=count;i++){
            let li = $('<li/>').addClass('iconfont star')
            $("ul").append(li)
        }

        //初始化li样式方法
        function initStyle(){
            $('ul>li').each(function(i,li){
                if(i<socre){
                    $(li).addClass('iconstar2').removeClass('iconstar')
                }else{
                    $(li).addClass('iconstar').removeClass('iconstar2')
                }
            })
        }
        initStyle()

        //鼠标进入事件
        $("ul>li").mouseenter(function(){
            let index = $(this).index()
            $('ul>li:lt('+(index+1)+')').addClass('iconstar2').removeClass('iconstar')
            $('ul>li:gt('+index+')').addClass('iconstar').removeClass('iconstar2')
        }).mouseleave(function(){
            //鼠标离开事件
            initStyle()  //恢复样式
        }).click(function(){
            //鼠标点击事件
            socre =  $(this).index()+1
        })
    </script>
</body>
</html>